<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
       xmlns:p="http://primefaces.org/ui">
    <f:view>
    	<h:head>
      	    <title>Agenda</title>
      	    <link rel="Stylesheet" type="text/css" href="../style.css"/>
        </h:head>
      
        <h:body>
      	    <h:form>
      	    	<h1>Agenda</h1>
      	    	<div class="Conteudo">
      	    		 <p:tabView effect="fade" effectDuration="normal">
      	    		 	<p:tab title="Cadastro">
      	    		 	<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
      	    		 		<h:outputText value="Tipo de Contato: " />
      	    		 		<p:selectOneMenu value="#{personalBB.tipo}">
      	    		 			<f:selectItem itemLabel="--Selecione--" itemValue=""/>				
      	    		 			<f:selectItem itemLabel="Pessoal" itemValue="personal"/>
      	    		 			<f:selectItem itemLabel="Profissional" itemValue="professional"/>
      	    		 		</p:selectOneMenu>
      	    		 		<h:outputText value="#{personalBB.tipo}" />
      	    		    </h:panelGrid>
      	    		    <p:outputPanel id="personalPanel" autoUpdate="true" rendered="#{personalBB.tipo == personal}">
      	    		    	<p:inputText/>
      	    		    </p:outputPanel>
      	    		    <p:outputPanel id="professionalPanel" autoUpdate="true" rendered="#{personalBB.tipo == professional}">
      	    		    	<p:commandButton value="Click me"/>
      	    		    </p:outputPanel>
      	    		 	</p:tab>
      	    		 	
      	    		 	<p:tab title="Consulta">
      	    		 		Consulta aqui...
      	    		 	</p:tab>
      	    		 	
      	    		 	<p:tab title="Compromissos">
      	    		 		Compromissos aqui...
      	    		 	</p:tab>
      	    		 </p:tabView>
      	    	</div>
      	    </h:form>
        </h:body>
    </f:view>		
</html>